<template>
	<view class="item" @click="toDetail">
		<!-- <image :src="item.cover" class="img" mode="widthFix"></image> -->
		<image :src="item.cover" class="img" ></image>
		<view class="introduce">
			<view class="detail">{{item.name}}</view>
			<view class="label">
				<view class="red_bag">
					未购中分{{item.total_red_packet}}元红包
				</view>
				<view class="person">
						满员：{{item.joinNumber}}/{{item.people_number}}人
				</view>
			</view>
			<view class="to_buy">
				<view class="price">
					<view class="now_price">
						¥{{item.selling_price}}
					</view>
					<view class="old_price">
						¥{{item.actual_price}}
					</view>
				</view>
				<view class="buy_btn">
					去参与
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			item:{
				default:{},
				type:Object
			}
		},
		methods:{
			toDetail(){
				let id = encodeURIComponent(this.item.id);
				uni.navigateTo({
					url: `commodity/detail/index?id=${id}&index=2`,
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/color.scss';
	.item{
		margin-bottom: 24rpx;
		display: flex;
		position: relative;
		/* #ifndef H5 */
		margin-left: 4rpx;
		width: 550rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-left: 2rpx;
		width: 588rpx;
		/* #endif */
		.img{
			display: block;
			width: 180rpx;
			height: 222rpx;
		}
		.introduce{
			/* #ifndef H5 */
			margin-left: 14rpx;
			/* #endif */
			/* #ifdef H5 */
			margin-left: 8rpx;
			width: 390rpx;
			/* #endif */
		}
		.detail{
			width: 318rpx;
			height: 68rpx;
			font-size: 24rpx;
			color: rgba(10, 12, 13, 1);
			line-height: 34rpx;
			display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2;
			  overflow: hidden;
		}
		.label{
			display: flex;
			font-size: 20rpx;
			line-height: 40rpx;
			.red_bag{
				// height: 40rpx;
				background: rgba(245, 70, 66, 0.1);
				color: $color;
				text-align: center;
				// overflow: hidden;
				margin-right: 4rpx;
				padding: 0 6rpx;
			}
		}
		.person{
			color: rgba(89, 89, 89, 1);
		}
		.to_buy{
			margin-top: 12rpx;
			display: flex;
			justify-content: space-between;
			.price{
				.now_price{
					font-size: 36rpx;
					color:$color ;
					line-height: 50rpx;
					&::first-letter{
						font-size: 24rpx;
					}
				}
				.old_price{
					font-size: 26rpx;
					color: rgba(139, 140, 141, 1);
					line-height: 32rpx;
					text-decoration: line-through;
					&::first-letter{
						font-size: 20rpx;
					}
				}
			}
			.buy_btn{
				width: 152rpx;
				height: 52rpx;
				background-color: $color;
				color: #FFF;
				text-align: center;
				line-height: 52rpx;
				border-radius: 13px;
				margin-top: 22rpx;
				font-size: 24rpx;
			}
		}
	}
</style>
